<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <h1></h1>
    <table border="1">
      <tbody>
        <tr>
          <td>1-1</td>
          <td>2-1</td>
          <td>3-1</td>
          <td>4-1</td>
        </tr>
        <tr>
          <td>1-2</td>
          <td>2-2</td>
          <td>3-3</td>
          <td>4-4</td>
        </tr>
        <tr>
          <td>1-3</td>
          <td>2-3</td>
          <td>3-3</td>
          <td>4-3</td>
        </tr>
        <tr>
          <td>1-4</td>
          <td>2-4</td>
          <td>3-4</td>
          <td>4-4</td>
        </tr>
      </tbody>
    </table>
    <script>
      //五一倒计时
      function diffTime(current, target) {
        var diffMs = Math.ceil((target.getTime() - current.getTime()) / 1000);
        var day = Math.floor(diffMs / (24 * 60 * 60));
        var hours = Math.floor((diffMs % (24 * 60 * 60)) / (60 * 60));
        var minutes = Math.floor((diffMs % (60 * 60)) / 60);
        var seconds = diffMs % 60;
        return {
          day: day,
          hours: hours,
          minutes: minutes,
          seconds: seconds,
        };
      }
      setInterval(function () {
        var current = new Date();
        var target = new Date(2023, 3, 28, 18, 00, 00);
        var res = diffTime(current, target);
        var h1 = document.querySelector('h1');
        h1.innerHTML = `距离五一放假还有<br>${res.day}天${res.hours}时${res.minutes}分钟${res.seconds}秒`;
      }, 1000);
      //表格效果
      var table = document.querySelector('table');
      var tr = document.querySelectorAll('tr');
      for (i = 0; i < tr.length; i++) {
        var rows = table.rows[i];
        rows.cells[i].style.backgroundColor = 'red';
      }
    </script>
  </body>
</html>
